/*
 * @Author: mayijun
 * @Date: 2022-05-14 11:12:52
 * @LastEditors: mayijun
 * @LastEditTime: 2022-07-08 10:12:17
 */
//日期类型标签组件
import { computed, defineComponent, onMounted, reactive } from 'vue';
import './index.scss';
import { RemoveFilled } from '@element-plus/icons-vue';
import DateSelectDialog from '@/views/indexApplication/config/components/dateSelectDialog/index.vue';
import { ElIcon } from 'element-plus';

const DateTag = defineComponent({
  name: 'DateTag',
  components: {
    RemoveFilled,
    DateSelectDialog
  },
  props: {
    tagData: {
      type: Object,
      default: () => ({})
    },
    parentNode: {
      type: Object,
      default: () => ({})
    },
  },
  emits: ['removeNode'],
  setup: (props, { slots, attrs, emit }) => {
    let state = reactive({
      dialogVisible: false
    });

    //日期框label
    const dateLabel = computed(() => {
      if (Array.isArray(props.tagData.value)) {
        return props.tagData.value.join(',');
      } else {
        return props.tagData.value;
      }
    });

    const openDateDialog = () => {
      state.dialogVisible = true;
    }
    const dialogClose = () => {
      state.dialogVisible = false;
    }
    //确认弹出框
    const confirmDialog = (v: any, type: any) => {
      props.tagData['value'] = v;
      props.tagData['rangeType'] = type;
      dialogClose();
    }
    //删除节点
    const removeNode = (tagData: any, parentNode: any) => {
      emit('removeNode', tagData, parentNode);
    }

    return () => {
      return (
        <>
          <div class="restrict-tag-date-wrap">
            <div class="tag-item tag-label">
              <span class="label-dis-wrap">{props.tagData.cnName}</span>
              <span class="remove-icon-wrap" onClick={() => { removeNode(props.tagData, props.parentNode) }}>
                <ElIcon><RemoveFilled /></ElIcon>
              </span>
            </div>
            <div class="tag-item select-date-btn" onClick={openDateDialog}>{dateLabel.value ? dateLabel.value : '请选择日期'}</div>
          </div>
          <date-select-dialog
            dialogVisible={state.dialogVisible}
            onDateDialogClose={dialogClose}
            onDateDialogConfirm={confirmDialog}
            tagData={props.tagData}
          />
        </>
      );
    };
  }
});

export default DateTag;
